<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="多谱音乐，音乐，曲谱播放器，五线谱，吉他谱，六线谱，简谱，四线谱，钢琴谱，小提琴谱，二胡谱，手风琴谱，扒谱，谱单，收藏，分享音乐，音乐互动，音乐社交，官网，dscore.cn">
    <meta name="description" content="多谱音乐是一款专注于发现与分享乐谱和音乐的产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">

    <title>多谱音乐  --  中国最全最好用的音乐钢琴谱吉他谱尤克里里谱平台</title>
    <link rel="stylesheet" href="__STATIC__/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="icon" href="__PUBLIC__/favicon.ico">
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__STATIC__/jquery-1.10.2.min.js"></script>
    <![endif]--><!--[if gte IE 9]><!-->
    <script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
</head>

<body>
    <div class="bg-light-grey mc-order-title">
        <h3 class="">多谱会员购买</h3>
        <p class="">当前帐户余额：{$account.amount} D币   累积成长天数： <span>{$account.member_days}</span>天</p>
    </div>
    <div class="mc-order margin-top-30">
        <div class="font-size-18 order-info">
            <ul class="padding-0 clearfix">
                <volist name="charge_set" id="set">
                    <li class="order-select pull-left">

                        <div class="total">
                            <p class=""><b class="price">{$set.discount_price}</b>元</p>
                            <p>{$set.amount} D币</p>
                            <if condition="$set.additional_coin neq 0"><p>送{$set.additional_coin} D币</p></if>
                        </div>
                        <div class="relative-to-total">{$set.member_days}天会员</div>
                        <i class="u-icn u-icn-checked"></i>
                        <input class="set" value="{$set.id}" data-uid="{$loginUser.uid}" hidden>
                    </li>
                </volist>
            </ul>
        </div>
        <div class="mc-style margin-top-30">
            <p>支付方式:</p>
            <div class="payment wx-channel">
                <i class="u-icn u-icn-checked"></i>
            </div>
            <div class="payment ali-channel">
                <i class="u-icn u-icn-checked"></i>
            </div>
        </div>
        <div class="mc-qrcode margin-top-30">
            <p>请扫描下方二维码支付</p>
            <div class="qrcode-container">
                <img class="qrcode" src="">
                <div class="qrcode-loading"><img src="__IMG__/qr-loading.gif" style="margin-top: 46px;"></div>
            </div>
        </div>
        <div class="margin-top-30 mc-ali-buybtn text-center">
            <a href="javascript:;" class="btn purchase-btn">确认支付</a>
        </div>
    </div>

    <div></div>
    <div class="bg-white">

    </div>
    <script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="__STATIC__/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="__JS__/layer.js"></script>
    <script>
        $(function () {
            $('.order-select').first().addClass('checked');
            $('.mc-style .payment').first().addClass('checked');
            $('.mc-ali-buybtn').hide();
            //获取支付二维码
            var id = $('.checked .set').val();
            var uid = $('.checked .set').attr('data-uid');
            var style = '{$style}';
            var data = {
                "id":id, "uid":uid, "style": style
            };
            var url = "{:U('order/wxPayment')}";
            $.post(url, data, function (res) {
                if (res.code != 200) {
                    layer.msg(
                        '订单生成失败，请刷新重试!',
                        {icon: 5}
                    );
                } else {
                    var path = 'https://www.dscore.cn/home/order/generalCode?url=' + res.data.code_url;
                    var order_no = res.data.order_no;
                    $('.qrcode-loading').hide();
                    $('.qrcode-container .qrcode').attr('src', path);
                    $('.qrcode-container .qrcode').attr('data-order', order_no);
                }
            });

            /*切换套餐刷新二维码*/
            $('.order-select').click(function () {
                var check = $(this).hasClass('checked');
                if (!check) {
                    //切换图片为加载中状态
                    $('.qrcode-loading').show();
                    $(this).addClass('checked').siblings().removeClass('checked');
                    //发送ajax请求刷新二维码
                    var id = $('.checked .set').val();
                    var uid = $('.checked .set').attr('data-uid');
                    var data = {
                        "id":id, "uid":uid, "style": style
                    };
                    var url = "{:U('order/wxPayment')}";
                    $.post(url, data, function (res) {
                        if (res.code != 200) {
                            layer.msg(
                                '订单生成失败，请刷新重试!',
                                {icon: 5}
                            );
                        } else {
                            var path = 'https://www.dscore.cn/home/order/generalCode?url=' + res.data.code_url;
                            var order_no = res.data.order_no;
                            $('.qrcode-loading').hide();
                            $('.qrcode-container .qrcode').attr('src', path);
                            $('.qrcode-container .qrcode').attr('data-order', order_no);
                        }
                    });
                }
            });

            /*切换支付方式*/
            $('.payment').click(function () {
                var check = $(this).hasClass('checked');
                if (!check) {
                    //切换图片为加载中状态
                    $('.mc-qrcode').show();
                    $('.qrcode-loading').show();
                    $(this).addClass('checked').siblings().removeClass('checked');
                    var wx = $(this).hasClass('wx-channel');
                    var id = $('.checked .set').val();
                    var uid = $('.checked .set').attr('data-uid');
                    var data = {
                        "id":id, "uid":uid, "style": style
                    };
                    if (wx) {
                        //请求支付二维码
                        $('.mc-ali-buybtn').hide();
                        var url = "{:U('order/wxPayment')}";
                        $.post(url, data, function (res) {
                            if (res.code != 200) {
                                layer.msg(
                                    '订单生成失败，请刷新重试!',
                                    {icon: 5}
                                );
                            } else {
                                var path = 'http://www.dms.com/home/order/generalCode?url=' + res.data.code_url;
                                var order_no = res.data.order_no;
                                $('.qrcode-loading').hide();
                                $('.qrcode-container .qrcode').attr('src', path);
                                $('.qrcode-container .qrcode').attr('data-order', order_no);
                            }
                        });
                    } else {
                        //弹出支付宝支付窗口
                        $('.mc-qrcode').hide();
                        $('.mc-ali-buybtn').show();
                        $('.mc-ali-buybtn .purchase-btn').click(function () {
                            var url = "{:U('order/aliPayOrderno')}";
                            $.get(url, function (res) {
                                if (res.code != 200) {
                                    layer.msg(
                                        '订单生成失败，请刷新重试!',
                                        {icon: 5}
                                    );
                                } else {
                                    var order_no = res.data;
                                    $('.qrcode-container .qrcode').attr('data-order', order_no);   //保存订单号;
                                    //弹出支付页面
                                    var style = '{$style}';
                                    var url = '/home/order/aliPayment/id/' + id + '/uid/' + uid + '/style/' + style + '/out_trade_no/' + res.data;
                                    window.open(url);
                                    //在当前页弹出支付提示
                                    layer.open({
                                        type: 2,
                                        title: '网页支付提示',
                                        move: false,
                                        area: ['580px', '250px'],
                                        content: '/home/member/aliNotice',
                                        end: function () {
                                            layer.closeAll();
                                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                            parent.layer.close(index);
                                            window.location.href = '/Home/user/index/id/' + uid;
                                        }
                                    })
                                }
                            })

                        })
                    }
                }
            });


            /*定时刷新请求支付状态*/
            setInterval(check_order_status, 3000);
            function check_order_status(){
                if ($('.mc-style .checked').hasClass('wx-channel')) {
                    var type = 'wx';
                } else if($('.mc-style .checked').hasClass('ali-channel')) {
                    var type = 'ali';
                }
                var order_no = $('.qrcode-container .qrcode').attr('data-order');
                if (order_no != 0) {
                    var url = "/home/order/checkOrder/orderno/" + order_no + '/type/' + type;
                    console.log(url);
                    $.get(url, function (res) {
                        if (res.code == 200) {
                            if (type == 'wx') {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index);
                            } else if (type == 'ali') {
                                layer.closeAll();
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index);
                            }

                        }
                    })
                }
            }
        })
    </script>
</body>
</html>
